<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="${ctxPath}/static/sui/semantic.amazon.min.css">
  <script src="${ctxPath}/static/sui/jquery-3.1.1.min.js"></script>
  <script src="${ctxPath}/static/sui/semantic.min.js"></script>
  <style>
    body {
      padding: 10px
    }

    .ui.vertical.menu .item > .header:not(.ui) {
      font-size: 1.3em;
    }

    .ui.vertical.menu .menu .item {
      font-size: 1.1em;
    }

    .ui.inverted.menu {
      background: #384f54;
    }

    div.container {
      float: left;
      margin-left: 260px;
      margin-bottom: 15px;
    }
  </style>
</head>

<body>
<div class="ui vertical inverted sidebar menu left overlay visible" id="toc" style="">
  <div class="item">
    <h2>模型分类</h2>
  </div>
  @for(cat in parentCat){
  <div class="item pcat" style="cursor:pointer;">
    <div class="header"><a style="padding: 6px;" data-value="${cat.id}" class="item" href="/sumodel/list/${cat.id}?root=1">${cat.name}</a></div>
    <div class="menu" ${categoryId==cat.id?'':'style="display: none;"'}>
      @for(ccat in childCat){
      @if(ccat.pid == cat.id){
      <a data-value="${ccat.id}" class="item" href="/sumodel/list/${ccat.id}">
      ${ccat.name}
      </a>
      @}
      @}
    </div>
  </div>
  @}
</div>
<div class="container">
  <div class="ui secondary  menu">
    <div class="left menu">
      <div class="item">
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;模型筛选</h3>
      </div>
      <div class="item">
        <div id="style_filter" class="ui multiple dropdown">
          <input type="hidden" name="filters">
          <i class="filter icon"></i>
          <span class="text">选择风格</span>
          <div class="menu">
            <div class="scrolling menu">
              @for(style in styles){
              <div class="item" data-value="${style.num}">
                <div class="ui empty circular"></div>
              ${style.name}
              </div>
              @}
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div id="mat_filter" class="ui multiple dropdown">
          <input type="hidden" name="filters">
          <i class="filter icon"></i>
          <span class="text">材质过滤</span>
          <div class="menu">
            <div class="scrolling menu">
              <div class="item" data-value="vray">
                <div class="ui empty circular"></div>
                Vray Ready
              </div>
              <div class="item" data-value="enscape">
                <div class="ui empty circular"></div>
                Enscape Ready
              </div>
              <div class="item" data-value="thea">
                <div class="ui empty circular"></div>
                Thea Ready
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <button type="button" id="filter_btn" class="ui primary button">
          筛选
        </button>
        &nbsp;&nbsp;
        <button type="button" id="all_btn" class="ui primary button">
          全部
        </button>
      </div>
    </div>
  </div>
  <div class="ui link cards">
    @for(model in models.records){
    <div class="card">
      <div class="image" style="overflow: hidden;">
        <img class="model" src="/sketchup/${model.filename}.png?t=${model.checksum!''}" style="height: 290px;${model.uploader=="3DWarehouse"?'width:auto;margin-left: -145px;':''}${model.uploader=="ZhiMo"?'width:auto;margin-left: -100px;':''}">
      </div>
      <div class="content">
        <div class="header">${model.modelname}</div>
        <div class="meta">
          <a fname="${model.filename}" mid="${model.id}" checksum="${model.checksum!''}" href="####" class="download_btn">点击下载(模型ID:${model.id})</a>
          <a href="####" mid="${model.id}" style="float: right;" class="deleteBtn">删除</a>
        </div>
        <div class="description">
          @if(model.vray==1){
          <a class="ui orange tag label">Vray</a>
          @}
          @if(model.enscape==1){
          <a class="ui blue tag label">Ensacpe</a>
          @}
          @if(model.thea==1){
          <a class="ui pink tag label">Thea</a>
          @}
        </div>
      </div>
      <div class="extra content">
          <span class="right floated">
            上传于${model.createtime,"yyyy-MM-dd"}
          </span>
        <span>
            <i class="archive icon"></i>
            文件大小: ${model.filesize,sizeFormat}
          </span>
      </div>
    </div>
    @}
  </div>
  <div class="ui borderless menu">
    <a class="item page" page="1" href="###">首页</a>
    @if(models.current > 1){
    <a class="item page" page="${models.current-1}" href="###">上一页</a>
    @}
    @if(models.current < models.pages ){
    <a class="item page" page="${models.current+1}" href="###">下一页</a>
    @}
    @if(models.current < models.pages){
    <a class="item page" page="${models.pages}" href="###">尾页</a>
    @}
  </div>
</div>
<div class="ui modal small">
  <div class="header">
    下载中,请不要关闭窗口....
  </div>
  <div class="image content">
    <div class="description">
      <div id="download_progress" class="ui indicating progress">
        <div class="bar"></div>
        <div class="label">模型下载中....</div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  var filename;
  $(function () {
    $('#style_filter').dropdown();
    $('#mat_filter').dropdown();

    $('.ui.modal').modal({
      closable: false
    });
    $('div.pcat').click(function () {
      var menu = $(this).find('>.menu:first');
      if (menu.is(":hidden")) {
        $('div.pcat > div.menu').hide();
        menu.show();
      } else {
        menu.hide();
      }
    });
    $('.deleteBtn').click(function (e) {
      e.preventDefault();
      if(window.confirm('确认要删除该模型吗？操作无法恢复')){
        $.post('/sumodel/delete/'+$(this).attr('mid'),function (data) {
          if(data.code===200){
            alert('删除成功');
            window.location = window.location;
          }else{
            alert('删除失败');
          }
        });
      }
    });
    $('.download_btn').click(function (e) {
      e.preventDefault();
      var result = confirm('模型可能会造成SU崩溃,建议先保存文件,是否继续?');
      if(result){
        start_download();
        filename = $(this).attr('fname');
        var checksum = $(this).attr('checksum');
        $.post('/sumodel/download/count/'+$(this).attr('mid'),function (data) {
          sketchup.download(filename,checksum);
        });
      }
      //window.location = "skp:download\@" + $(this).attr('fname');
    });
    $('#all_btn').click(function () {
      window.location="/sumodel/list";
    });
    $('#filter_btn').click(function () {
      var url = '/sumodel/list/${categoryId}?root=${root!"0"}';
      url += ('&styles=' + $('#style_filter').dropdown('get value'));
      url += ('&mats=' + $('#mat_filter').dropdown('get value'));
      window.location = url;
    });
    $('a.page').click(function () {
      var url = '/sumodel/list/${categoryId}?root=${root!"0"}';
      url += ('&styles=' + $('#style_filter').dropdown('get value'));
      url += ('&mats=' + $('#mat_filter').dropdown('get value'));
      url += ('&page='+$(this).attr('page'));
      window.location = url;
    });
    var currentCat = $('a[data-value="${categoryId}"]');
    currentCat.parent().show();
    currentCat.css('background-color', '#17373d');
    $('#style_filter').dropdown('set selected',[${filter_styles!""}])
    $('#mat_filter').dropdown('set selected',[${mats!""}])
    sketchup.update_last_url(window.location.href);
  });

  function start_download() {
    $('#download_progress').progress({
      percent: 100
    });
    $('.ui.modal').modal('show');
  }
  function set_download_progress(value) {
    $('#download_progress')
    .progress('set percent', value);
    /*if(value=='100'){
      sketchup.load_su_model(filename);
    }*/
  }
 </script>

</html>